<template>
    <div>

    <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
        <el-submenu index="2">
            <template slot="title">定制</template>

<div v-for="(data,index) in this.cusomelist">
    <el-menu-item :index="`2-${index}`">{{data}}</el-menu-item>
</div>
        </el-submenu>
        <el-submenu index="3">
            <template slot="title">竞技训练</template>

            <div v-for="(data,index) in competitivelist">
                <el-menu-item :index="`3-${index}`">{{data}}</el-menu-item>
            </div>
        </el-submenu>

        <el-submenu index="4">
            <template slot="title">潮流生活</template>

            <div v-for="(data,index) in fashionlist">
                <el-menu-item :index="`4-${index}`">{{data}}</el-menu-item>
            </div>
        </el-submenu>
        <div style="margin-left: 1000px;margin-top: 10px">
        <el-select
                v-model="value"
                multiple
                filterable
                remote
                reserve-keyword
                placeholder="请输入关键词"
                :remote-method="remoteMethod"
                :loading="loading">
            <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>
        <el-button type="primary">搜索</el-button>
        </div>
    </el-menu>
        <!--轮播图-->
       <el-row  style="height: 500px;width: 100%">
           <el-col :span="24">
               <slideshow></slideshow>
           </el-col>
       </el-row>
<!--优惠卷-->
        <el-row  style="height: 400px;">
            <el-col :span="24">
                <coupons></coupons>
            </el-col>
        </el-row>

        <!--商品详情-->
        <el-row style="height: 500px;width: 100%;margin-top: 300px" >

            <el-col :span="10" v-for="(o, index) in this.store" :key="index" >

                <el-card style="margin-top: 50px;margin-left: 150px">
                    <el-image
                            style="width: 1000px   ;height: 300px;      display: table-cell; vertical-align: middle; text-align: center;"
                            :src="o.image"
                            fit="cover"></el-image>
                    <div style="padding: 14px;">
                        <span class="store-name">{{o.name}}</span>
                        <div class="bottom clearfix">
                            <time class="time">{{ o.commment }}</time>
                            <el-button type="text" size="medium " class="button">￥{{o.price}}元</el-button>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <!--展示后续内容;如7天无理由退款，此处简单以图片展示-->
        <el-row style="width: 100px;align-items: center">
            <el-col :span="24" style="width: 100%">
                <img :src="imageVie">
                <img :src="imageView"  style="width: 1400px">
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import  slideshow from  "../../views/shop/slideshow"
    import  coupons from "../../views/shop/coupons"
    export default {
        name: "shopype",
        components:{
          slideshow:slideshow,
            coupons:coupons,
        },
        data() {
            return {
                imageView:require("../../assets/guide6.png"),
                imageVie:require("../../assets/guide5.png"),
                store:[],
                options: [],
                value: [],
                list: [],
                datalistType:[],
                loading: false,
                cusomelist: [],
                competitivelist:[],
                fashionlist:[],
                datalist:[],
                activeIndex: '1',
                activeIndex2: '1'
            };
        },
        methods: {

            //获取商铺物品信息
            getstore(){

                const query = Bmob.Query("shopestore");
                query.find().then(res => {
                    this.datalist = res
                    this.store = res

                });
            },
            //获取定制类别信息
            gettcustometype(){

                const query = Bmob.Query("customType");
                query.find().then(res => {
for(let i =0;i<res.length;i++){
                    this.cusomelist.push(res[i].typename)
    console.log( res[i].typename)
}

                    // console.log(res[0].typename)
                });
            },
            //获取体育竞技分类
            getcompetitivetype(){

                const query = Bmob.Query("competitiveType");
                query.find().then(res => {
                    for(let i =0;i<res.length;i++){
                        this.competitivelist.push(res[i].typename)
                        console.log( res[i].typename)
                    }

                    // console.log(res[0].typename)
                });
            },
//获取潮流分类
            getfashionlisttype(){
                const query = Bmob.Query("fashionType");
                query.find().then(res => {
                    for(let i =0;i<res.length;i++){
                        this.fashionlist.push(res[i].typename)
                        console.log( res[i].typename)
                    }

                    // console.log(res[0].typename)
                });
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            remoteMethod(query) {
                if (query !== '') {
                    this.loading = true;
                    setTimeout(() => {
                        this.loading = false;
                        this.options = this.list.filter(item => {
                            return item.label.toLowerCase()
                                .indexOf(query.toLowerCase()) > -1;
                        });
                    }, 200);
                } else {
                    this.options = [];
                }
            }

        },
        created() {
           this.gettcustometype();
           this.getstore();
           this.getcompetitivetype();
this.getfashionlisttype()
        },
        mounted() {
            this.list = this.states.map(item => {
                return { value: `value:${item}`, label: `label:${item}` };
            });
        },
    }
</script>

<style scoped>
    .store-name{
        font-size: large;
        font-weight: bold;
        font-style: unset;
    }

    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
</style>